<template>
  <div class="blog-platform">
    <!-- 顶部导航 -->
    <Navbar @openLogin="openLoginDialog" />

    <!-- 主内容 -->
    <main class="main-wrapper">
      <div class="content-container">
        <!-- 左侧边栏 -->
        <aside class="left-sidebar">
          <!-- 分类 -->
          <div class="sidebar-card">
            <h3 class="sidebar-title">
              <el-icon><Collection /></el-icon>
              文章分类
            </h3>
            <div class="category-list">
              <!-- 全部分类选项 -->
              <div
                class="category-item"
                :class="{ active: selectedCategoryId === null }"
                @click="selectCategory(null)"
              >
                <span class="category-name">全部</span>
                <span class="category-count">{{ total }}</span>
              </div>
              
              <!-- 具体分类列表 -->
              <div
                v-for="category in categories"
                :key="category.id"
                class="category-item"
                :class="{ active: selectedCategoryId === category.id }"
                @click="selectCategory(category.id)"
              >
                <span class="category-name">{{ category.name }}</span>
                <span class="category-count">{{ category.num }}</span>
              </div>
            </div>
          </div>

          <!-- 标签云 -->
          <div class="sidebar-card">
            <h3 class="sidebar-title">
              <el-icon><PriceTag /></el-icon>
              热门标签
              <span v-if="selectedTags.length > 0" class="tag-selected-count">({{ selectedTags.length }})</span>
            </h3>
            <div class="tag-cloud">
              <span
                v-for="tag in popularTags"
                :key="tag"
                class="cloud-tag"
                :class="{ active: selectedTags.includes(tag) }"
                @click="toggleTag(tag)"
              >
                {{ tag }}
              </span>
            </div>
          </div>
        </aside>

        <!-- 中间主内容 -->
        <div class="main-content">
          <!-- 排序选择器 -->
          <div class="sort-toolbar">
            <div class="sort-options">
              <span class="sort-label">排序：</span>
              <div class="sort-buttons">
                <button
                  v-for="option in sortOptions"
                  :key="option.value"
                  class="sort-btn"
                  :class="{ active: currentSort === option.value }"
                  @click="handleSortChange(option.value)"
                >
                  <el-icon v-if="option.icon"><component :is="option.icon" /></el-icon>
                  {{ option.label }}
                </button>
              </div>
            </div>
            <div class="result-info">
              <span>共 {{ total }} 篇文章</span>
            </div>
          </div>

          <!-- 博客列表 -->
          <div v-if="loading" class="loading-state">
            <el-icon class="is-loading" :size="40"><Loading /></el-icon>
            <p>加载中...</p>
          </div>

          <div v-else-if="blogs.length === 0" class="empty-state">
            <el-icon :size="80"><DocumentDelete /></el-icon>
            <p>暂无文章</p>
          </div>

          <div v-else class="blog-list">
            <article
              v-for="blog in blogs"
              :key="blog.id"
              class="blog-card"
              @click="viewBlog(blog.id)"
            >
              <h3 class="blog-title">{{ blog.title }}</h3>
              
              <p class="blog-summary">{{ blog.summary }}</p>
              
              <div class="blog-meta">
                <div class="meta-left">
                  <span class="author-name">{{ blog.author }}</span>
                  <span class="meta-sep">·</span>
                  <span class="publish-date">{{ formatDate(blog.createdAt) }}</span>
                  <span v-if="blog.tags && blog.tags.length > 0" class="meta-sep">·</span>
                  <span v-if="blog.tags && blog.tags.length > 0" class="blog-tags">
                    <span v-for="(tag, index) in blog.tags.slice(0, 3)" :key="tag" class="tag-text">
                      {{ tag }}<span v-if="index < Math.min(blog.tags.length, 3) - 1" class="tag-sep">、</span>
                    </span>
                  </span>
                </div>
                <div class="meta-right">
                  <span class="meta-stat">阅读 {{ formatNumber(blog.views) }}</span>
                  <span class="meta-sep">·</span>
                  <span class="meta-stat">评论 {{ formatNumber(blog.commentCount || 0) }}</span>
                </div>
              </div>
            </article>
          </div>

        </div>

        <!-- 右侧边栏 -->
        <aside class="right-sidebar">
          <!-- 热门文章 -->
          <div class="sidebar-card">
            <h3 class="sidebar-title">
              <el-icon><TrendCharts /></el-icon>
              热门文章
            </h3>
            <div class="trending-list">
              <div
                v-for="(item, index) in topBlogs"
                :key="index"
                class="trending-item"
                @click="viewBlog(item.id)"
              >
                <span class="rank" :class="`rank-${index + 1}`">{{ index + 1 }}</span>
                <div class="trending-content">
                  <p class="trending-title">{{ item.title }}</p>
                  <span class="trending-views">
                    <el-icon><View /></el-icon>
                    {{ formatNumber(item.views) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </main>

    <!-- 分页器 -->
    <footer v-if="!loading && blogs.length > 0" class="pagination-footer">
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </footer>

    <!-- 登录对话框 -->
    <el-dialog
      v-model="showLoginDialog"
      title="欢迎回来"
      width="420px"
      :close-on-click-modal="false"
      :modal-class="'dark-modal'"
      class="login-dialog"
    >
      <div class="login-content">
        <div class="login-header">
          <p class="login-subtitle">{{ isLogin ? '登录您的账户' : '创建新账户' }}</p>
        </div>

        <el-form :model="loginForm" class="login-form" @submit.prevent="handleLogin">
          <el-form-item>
            <el-input
              v-model="loginForm.username"
              size="large"
              placeholder="请输入账号"
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="loginForm.password"
              size="large"
              type="password"
              placeholder="请输入密码"
              show-password
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

        </el-form>
        
        <el-button
          type="primary"
          size="large"
          class="login-btn"
          :loading="loginLoading"
          @click="handleLogin"
        >
          {{ isLogin ? '立即登录' : '注册账号' }}
        </el-button>

        <div class="login-switch">
          <span v-if="isLogin">
            还没有账号？
            <a href="javascript:;" @click="isLogin = false">立即注册</a>
          </span>
          <span v-else>
            已有账号？
            <a href="javascript:;" @click="isLogin = true">立即登录</a>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  View,
  Star,
  ChatDotRound,
  TrendCharts,
  PriceTag,
  Collection,
  Lock,
  DocumentDelete,
  Loading,
  User,
  Clock,
  Sort,
  Sunny
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getBlogList, login, register, getUserInfo, getTagList, getCategoriesWithNum } from '../api/blog'
import Navbar from '../components/Navbar.vue'
import { normalizeTags } from '../utils/tags'

const router = useRouter()

const blogs = ref([])
const topBlogs = ref([])
const loading = ref(false)
const showLoginDialog = ref(false)
const isLogin = ref(true)
const loginLoading = ref(false)
// 使用 ref 来响应式地追踪登录状态
const loginStatus = ref(!!localStorage.getItem('token'))
const isLoggedIn = computed(() => loginStatus.value)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

const loginForm = ref({
  username: '',
  password: ''
})

const currentUser = computed(() => {
  const user = localStorage.getItem('user')
  return user ? JSON.parse(user) : {}
})

const popularTags = ref([])

// 分类数据
const categories = ref([])
// 当前选中的分类ID
const selectedCategoryId = ref(null)
// 当前选中的标签数组（标签名称）
const selectedTags = ref([])

// 排序选项
const sortOptions = [
  { label: '最新发布', value: 'latest', icon: Clock, fields: ['created_at'], dirs: ['DESC'] },
  { label: '最多浏览', value: 'popular', icon: TrendCharts, fields: ['view_count'], dirs: ['DESC'] },
  { label: '最多评论', value: 'commented', icon: ChatDotRound, fields: ['comment_count'], dirs: ['DESC'] },
  { label: '默认排序', value: 'default', icon: Sort, fields: [], dirs: [] }
]
const currentSort = ref('default')

const fetchBlogs = async () => {
  loading.value = true
  try {
    const params = {
      pageIndex: currentPage.value,
      pageSize: pageSize.value
    }
    
    // 如果选中了分类，添加categoryId参数
    if (selectedCategoryId.value) {
      params.categoryId = selectedCategoryId.value
    }
    
    // 如果选中了标签，添加tags参数（标签名称数组）
    if (selectedTags.value.length > 0) {
      params.tags = selectedTags.value
    }
    
    // 添加排序参数
    const sortOption = sortOptions.find(opt => opt.value === currentSort.value)
    if (sortOption && sortOption.fields.length > 0) {
      params.orderFields = sortOption.fields
      params.orderDirs = sortOption.dirs
    }
    
    const response = await getBlogList(params)
    
    // 处理返回的数据，兼容两种格式：直接数组 或 {data: [], total: 0}
    const blogList = response.data || response
    
    // 更新总数（如果后端返回了total）
    if (response.total !== undefined) {
      total.value = response.total
    } else if (Array.isArray(blogList)) {
      // 如果没有返回total，使用数组长度作为临时值
      total.value = blogList.length
    }
    
    blogs.value = blogList.map(blog => {
      // 使用公共工具处理标签
      const tagsArray = normalizeTags(blog.tags)
      
      return {
        ...blog,
        tags: tagsArray,
        author: blog.userName || blog.author || '匿名用户',
        views: blog.viewCount || 0,
        favorites: blog.favoriteCount || 0,
        commentCount: blog.commentCount || 0
      }
    })
    
    console.log('列表页加载的博客数据（第一条）:', blogList[0])
    console.log('处理后第一条博客的标签:', blogs.value[0]?.tags)

    // 生成热门文章排行
    topBlogs.value = [...blogs.value]
      .sort((a, b) => (b.views || 0) - (a.views || 0))
      .slice(0, 5)
      .map(blog => ({
        ...blog,
        id: blog.id,
        title: blog.title.length > 40 ? blog.title.substring(0, 40) + '...' : blog.title,
        views: blog.views
      }))
  } catch (error) {
    console.error('获取博客列表失败:', error)
    ElMessage.error('获取博客列表失败')
  } finally {
    loading.value = false
  }
}

// 获取标签列表
const fetchTags = async () => {
  try {
    const response = await getTagList()
    // 接口返回字符串数组
    popularTags.value = response.data || response || []
  } catch (error) {
    console.error('获取标签列表失败:', error)
  }
}

// 获取分类列表
const fetchCategories = async () => {
  try {
    const response = await getCategoriesWithNum()
    // 接口返回包含id、name、num三个字段的JSON对象数组
    categories.value = response.data || response || []
  } catch (error) {
    console.error('获取分类列表失败:', error)
  }
}

// 选择分类
const selectCategory = (categoryId) => {
  // 如果点击的是当前已选中的分类，则取消选中
  if (selectedCategoryId.value === categoryId) {
    selectedCategoryId.value = null
  } else {
    selectedCategoryId.value = categoryId
  }
  
  // 重置到第一页并重新获取博客列表
  currentPage.value = 1
  fetchBlogs()
}

// 选择标签（多选）
const toggleTag = (tagName) => {
  const index = selectedTags.value.indexOf(tagName)
  
  if (index > -1) {
    // 如果已选中，则取消选中
    selectedTags.value.splice(index, 1)
  } else {
    // 如果未选中，则添加到选中列表
    selectedTags.value.push(tagName)
  }
  
  // 重置到第一页并重新获取博客列表
  currentPage.value = 1
  fetchBlogs()
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = Math.floor((now - date) / 1000)

  if (diff < 60) return '刚刚'
  if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`
  if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`
  if (diff < 604800) return `${Math.floor(diff / 86400)}天前`

  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric',
    month: '2-digit', 
    day: '2-digit' 
  })
}

const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num || 0
}

const viewBlog = (id) => {
  router.push(`/blogs/${id}`)
}


const handleLogin = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.warning('请输入用户名和密码')
    return
  }

  // 注册时检查密码长度
  if (!isLogin.value && loginForm.value.password.length < 6) {
    ElMessage.warning('密码长度不能少于6位')
    return
  }

  loginLoading.value = true

  try {
    let response
    
    // 根据状态调用登录或注册接口
    if (isLogin.value) {
      response = await login(loginForm.value.username, loginForm.value.password)
    } else {
      response = await register(loginForm.value.username, loginForm.value.password)
    }

    // 保存 token
    localStorage.setItem('token', response.accessToken)
    localStorage.setItem('tokenType', response.tokenType)
    localStorage.setItem('expiresIn', response.expiresIn)

    // 获取用户信息
    try {
      const userInfo = await getUserInfo()
      localStorage.setItem('user', JSON.stringify({
        id: userInfo.id || userInfo.userId,
        username: userInfo.username
      }))
    } catch (error) {
      console.error('获取用户信息失败:', error)
      // 如果获取用户信息失败，使用登录时输入的用户名
      localStorage.setItem('user', JSON.stringify({
        username: loginForm.value.username
      }))
    }

    // 更新登录状态
    loginStatus.value = true
    
    // 触发自定义事件通知其他组件登录成功
    window.dispatchEvent(new CustomEvent('user-login'))

    ElMessage.success(isLogin.value ? '登录成功！' : '注册成功！')
    showLoginDialog.value = false
    loginForm.value = { username: '', password: '' }
  } catch (error) {
    console.error(isLogin.value ? '登录失败:' : '注册失败:', error)
    const errorMsg = error.response?.data?.description || error.message || (isLogin.value ? '登录失败' : '注册失败')
    ElMessage.error(errorMsg)
  } finally {
    loginLoading.value = false
  }
}

// 排序处理
const handleSortChange = (sortValue) => {
  currentSort.value = sortValue
  currentPage.value = 1
  fetchBlogs()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page
  fetchBlogs()
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchBlogs()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const getUserAvatar = (username) => {
  if (!username) return ''
  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${username}`
}

// 打开登录对话框
const openLoginDialog = () => {
  showLoginDialog.value = true
}

// 监听认证过期事件（401错误）
const handleAuthExpired = () => {
  loginStatus.value = false
}

// 监听用户登出事件
const handleUserLogout = () => {
  loginStatus.value = false
}

// 监听打开登录弹窗事件
const handleOpenLogin = () => {
  showLoginDialog.value = true
}

onMounted(() => {
  fetchBlogs()
  fetchTags()
  fetchCategories()
  
  // 添加事件监听
  window.addEventListener('auth-expired', handleAuthExpired)
  window.addEventListener('user-logout', handleUserLogout)
  window.addEventListener('open-login', handleOpenLogin)
})

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('auth-expired', handleAuthExpired)
  window.removeEventListener('user-logout', handleUserLogout)
  window.removeEventListener('open-login', handleOpenLogin)
})
</script>

<style scoped>
/* 全局样式 */
.blog-platform {
  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

/* 主内容 */
.main-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 32px;
  flex: 1;
  width: 100%;
}

.content-container {
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  gap: 32px;
  align-items: start;
}

/* 博客列表 */
.blog-list {
  display: grid;
  gap: 2px;
}

.blog-card {
  background: var(--bg-card);
  border-radius: 0;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid var(--border-light);
  min-height: 120px;
}

.blog-card:hover {
  background: var(--bg-hover);
}

.blog-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.blog-card:hover .blog-title {
  color: var(--primary-start);
}

.blog-summary {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.meta-right {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.author-name {
  color: var(--text-secondary);
  font-weight: 500;
}

.publish-date {
  color: var(--text-tertiary);
}

.blog-tags {
  display: inline-flex;
  align-items: center;
}

.tag-text {
  color: var(--primary-start);
  cursor: pointer;
  transition: all 0.2s;
}

.tag-text:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

.tag-sep {
  color: var(--text-tertiary);
  margin: 0 2px;
}

.meta-sep {
  color: var(--text-tertiary);
  margin: 0 6px;
  opacity: 0.5;
}

.meta-stat {
  color: var(--text-tertiary);
}

/* 侧边栏 */
.left-sidebar,
.right-sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-title .el-icon {
  color: var(--primary-start);
  font-size: 16px;
}

/* 热门文章 */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trending-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border-radius: 10px;
  transition: all 0.2s;
}

.trending-item:hover {
  background: var(--bg-tertiary);
}

.rank {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #f0f1f5;
  color: #6b7280;
  flex-shrink: 0;
}

.rank-1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #000;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.rank-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
  color: #000;
}

.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #e6a771 100%);
  color: #fff;
}

.trending-content {
  flex: 1;
  min-width: 0;
}

.trending-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.trending-views {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 标签云 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cloud-tag {
  font-size: 13px;
  color: #0EA5E9;
  background: rgba(14, 165, 233, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  border: 1px solid transparent;
  position: relative;
}

.cloud-tag:hover {
  background: rgba(14, 165, 233, 0.2);
  transform: translateY(-2px);
}

.cloud-tag.active {
  background: #0EA5E9;
  color: #fff;
  border-color: #0EA5E9;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
  font-weight: 600;
}

.cloud-tag.active:hover {
  background: #0284C7;
  border-color: #0284C7;
}

.tag-selected-count {
  font-size: 12px;
  color: #0EA5E9;
  font-weight: 600;
  margin-left: 4px;
}

/* 分类列表 */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-tertiary);
  position: relative;
}

.category-item:hover {
  background: rgba(14, 165, 233, 0.1);
}

.category-item.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
  border: 1px solid rgba(14, 165, 233, 0.3);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary-start);
  border-radius: 0 2px 2px 0;
}

.category-item.active .category-name {
  color: var(--primary-start);
  font-weight: 700;
}

.category-item.active .category-count {
  color: var(--primary-start);
}

.category-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s;
}

.category-count {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 600;
  transition: all 0.2s;
}

/* 加载和空状态 */
.loading-state,
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
}

.loading-state p,
.empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* 登录对话框 - 暗黑模糊蒙层 */
:deep(.dark-modal) {
  background: rgba(10, 14, 26, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

:deep(.login-dialog) {
  background: var(--bg-card);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-normal);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 
              0 0 0 1px rgba(0, 212, 255, 0.1);
  z-index: 9999 !important;
}

:deep(.login-dialog .el-dialog__header) {
  padding: 32px 32px 20px;
  background: var(--gradient-dark);
  border-bottom: 1px solid var(--border-normal);
  position: relative;
}

:deep(.login-dialog .el-dialog__header::before) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

:deep(.login-dialog .el-dialog__title) {
  color: var(--text-bright);
  font-size: 24px;
  font-weight: 900;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:deep(.login-dialog .el-dialog__close) {
  color: var(--text-secondary);
  font-size: 20px;
  transition: all 0.3s;
}

:deep(.login-dialog .el-dialog__close:hover) {
  color: var(--primary-start);
  transform: rotate(90deg);
}

:deep(.login-dialog .el-dialog__body) {
  background: var(--bg-card);
  padding: 32px;
}

.login-content {
  padding: 0;
}

.login-header {
  margin-bottom: 28px;
  text-align: center;
}

.login-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

.login-form {
  margin-bottom: 24px;
}

.login-form :deep(.el-form-item) {
  margin-bottom: 20px;
}

.login-form :deep(.el-form-item__label) {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}

.login-form :deep(.el-input__wrapper) {
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border-normal) inset;
  background: var(--bg-tertiary);
  padding: 12px 16px;
  transition: all 0.3s;
}

.login-form :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--primary-start) inset;
  background: var(--bg-hover);
}

.login-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px var(--primary-start) inset !important;
  background: var(--bg-secondary);
}

.login-form :deep(.el-input__inner) {
  color: var(--text-bright);
  font-size: 15px;
}

.login-form :deep(.el-input__inner::placeholder) {
  color: var(--text-tertiary);
}

.login-form :deep(.el-input__prefix) {
  color: var(--text-tertiary);
}

.login-btn {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background: var(--gradient-primary) !important;
  border: none !important;
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--shadow-glow);
  color: var(--bg-primary) !important;
  transition: all 0.3s;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.login-btn:hover {
  box-shadow: 0 8px 30px rgba(0, 212, 255, 0.6) !important;
  transform: translateY(-2px);
  background: var(--gradient-primary) !important;
}

.login-btn:active {
  transform: translateY(0);
}

.login-switch {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.login-switch a {
  color: var(--primary-start);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}

.login-switch a:hover {
  color: var(--primary-light);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 分页器固定在底部 */
.pagination-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-normal);
  padding: 16px 0;
  margin-top: auto;
}

.pagination-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: center;
}

:deep(.el-pagination) {
  gap: 6px;
  background: transparent !important;
}

:deep(.el-pagination .el-pagination__total) {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 13px;
}

:deep(.el-pagination .el-pagination__sizes) {
  background: transparent !important;
}

:deep(.el-pagination .el-select) {
  background: transparent !important;
}

:deep(.el-pagination .el-select .el-input__wrapper) {
  background: var(--bg-tertiary) !important;
  box-shadow: none !important;
  border: 1px solid var(--border-normal);
  transition: all 0.2s;
  height: 28px;
}

:deep(.el-pagination .el-select .el-input__wrapper:hover) {
  background: var(--bg-hover) !important;
  border-color: var(--primary-start);
}

:deep(.el-pagination .el-select .el-input__wrapper.is-focus) {
  background: var(--bg-hover) !important;
  border-color: var(--primary-start);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1) !important;
}

:deep(.el-pagination .el-select .el-input__inner) {
  color: var(--text-bright);
}

:deep(.el-pagination button),
:deep(.el-pagination .el-pager li) {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary);
  border: 1px solid var(--border-normal);
  border-radius: 4px;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  transition: all 0.2s;
}

:deep(.el-pagination button:hover),
:deep(.el-pagination .el-pager li:hover) {
  color: var(--primary-start);
  border-color: var(--primary-start);
  background: rgba(14, 165, 233, 0.1) !important;
}

:deep(.el-pagination button:disabled),
:deep(.el-pagination button:disabled:hover) {
  background: var(--bg-secondary) !important;
  color: var(--text-tertiary);
  border-color: var(--border-light);
  cursor: not-allowed;
  opacity: 0.5;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: var(--primary-start) !important;
  color: #fff;
  border-color: var(--primary-start);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

:deep(.el-pagination .el-pager li.is-active:hover) {
  background: var(--primary-light) !important;
}

:deep(.el-pagination .el-pagination__jump) {
  color: var(--text-secondary);
  margin-left: 8px;
  font-size: 13px;
}

:deep(.el-pagination .el-input__wrapper) {
  background: var(--bg-tertiary) !important;
  box-shadow: none !important;
  border: 1px solid var(--border-normal);
  padding: 2px 6px;
  height: 28px;
  transition: all 0.2s;
}

:deep(.el-pagination .el-input__wrapper:hover) {
  background: var(--bg-hover) !important;
  border-color: var(--primary-start);
}

:deep(.el-pagination .el-input__wrapper.is-focus) {
  background: var(--bg-hover) !important;
  border-color: var(--primary-start);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1) !important;
}

:deep(.el-pagination .el-input__inner) {
  background: transparent !important;
  color: var(--text-bright);
  border: none;
  text-align: center;
  height: 24px;
  line-height: 24px;
}

:deep(.el-pagination .el-input__inner:focus) {
  border: none;
  box-shadow: none;
}

/* 排序工具栏 */
.sort-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.sort-buttons {
  display: flex;
  gap: 8px;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-normal);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 500;
}

.sort-btn:hover {
  border-color: var(--primary-start);
  background: rgba(14, 165, 233, 0.1);
  color: var(--primary-start);
}

.sort-btn.active {
  border-color: var(--primary-start);
  background: var(--primary-start);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.sort-btn .el-icon {
  font-size: 14px;
}

.result-info {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* 响应式 */
@media (max-width: 1400px) {
  .content-container {
    grid-template-columns: 280px 1fr;
  }

  .right-sidebar {
    display: none;
  }
}

@media (max-width: 1200px) {
  .content-container {
    grid-template-columns: 1fr;
  }

  .left-sidebar,
  .right-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .main-wrapper {
    padding: 24px 16px;
  }

  .pagination-container {
    padding: 0 16px;
  }

  .blog-card {
    padding: 14px 16px;
    min-height: 100px;
  }

  .blog-title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .blog-summary {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .blog-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .meta-right {
    width: 100%;
  }
}
</style>
